/**
 * 检查两次密码输入是否一致
 */
function check() {
    if (document.getElementById("password").value !=
        document.getElementById("rePassword").value) {
        document.getElementById("warning").innerHTML = "两次密码的输入不一致!";
        document.getElementById("warning").style.color = "red";
    } else {
        document.getElementById("warning").innerHTML = "密码一致";
        document.getElementById("warning").style.color = "greenyellow";
    }
}

/**
 * 表单验证
 */
$(function () {
    // let username = document.getElementById("username");
    // let pw = document.getElementById("password");
    $("#username").blur(function () {
        let username = $(this).val();
        if (username == "") {
            $("#userWaring").html("用户名不能为空!");
        } else {
            if (username.length < 3 || username.length > 10) {
                $("#userWaring").html("用户名格式不正确!");
                ok1 = false;
            } else {
                $("#userWaring").html(null);
                ok1 = true;
            }
        }
    });
    $("#password").blur(function () {
        let password = $(this).val();
        if (password == "") {
            $("#pwWaring").html("不能为空!");
        } else {
            if (password.length < 6 || password.length > 20) {
                $("#pwWaring").html("格式不正确!");
                ok2 = false;
            } else {
                ok2 = true;
            }
        }
    });
    $("#phone").blur(function () {
        let phone = $(this).val();
        if (phone == "") {
            $("#phoneWaring").html("不能为空!");
        } else {
            if (phone.length != 11) {
                $("#phoneWaring").html("格式不正确!");
                ok3 = false;
            } else {
                $("#phoneWaring").html(null);
                ok3 = true;
            }
        }
    });
});

/**
 * 注册用户
 */
function register() {
    let username = $("#username").val();
    let password = $("#password").val();
    let reg = /^[a-zA-Z]\w{5,15}$/;
    if (!reg.test(password)) {
        alert("密码不得少于6位！");
        return;
    }
    let data = {
        username: username,
        password: password,
        phone: $("#phone").val(),
        birthday: $("#birthday").val(),
        sex: $("input[name='sex']:checked").val(),
        hobby: hobbyList(),
        introduce: $("#introduce").val(),
        token: $.cookie("token")
    };

    /**
     * url 请求路径，对应servlet里面的webServlet
     * data 获取页面数据
     * type 请求方式
     * dataType 返回对象格式，一般为json
     * success 返回结果
     */
    $('input').trigger("blur");
    if (ok1 && ok2 && ok3) {
        let result = myAjax('/userRegister', 'post', data);
        console.log(result);
        if (result.result === 1) {
            alert("注册成功！");
            //页面跳转，下面两种方式都可以
            // window.location.href="";
            window.open("/login.html", "_blank");//_blank 在新窗口中打开被链接文档。
        } else if (result.result === 3) {
            alert("该用户已被注册！");
        } else {
            alert("注册失败");
        }
    } else {
        alert("存在错误，无法提交！！")
    }

}

/**
 * 获取多选框已选中的值
 * @returns {string}
 */
function hobbyList() {
    let vote = [];
    /*
        attr和prop的区别
        1、对于HTML元素本身就带有的固有属性，在处理时，使用prop方法
        2、对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
        3、checkbox，radio和select中对应checked和selected属于固有属性，因此需要用prop方法，用attr会出现undefined
        4、action="delete"，delete是自己定义的属性，用attr方法
     */
    $('input:checkbox[name=hobby]').each(function () {
        // console.log($(this).attr('checked',true));
        //设置true为全部选中
        if ($(this).prop('checked')) {
            vote.push($(this).val())
        }
    });
    //join(),不加参数默认","，加了参数以参数作为分隔符
    return vote.join();
    // return vote.toString();
}

// function toLogin() {
//     window.location.href="/back/login.html";
// }


/**
 * let 局部变量
 * var 全局变量
 */
function flushRegister() {
    location.assign("/userRegister.html")
}